<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Pinterest</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/header.css">
        <link rel="stylesheet" href="css/thumbnail-box.css">
        <script type="text/javascript" src="js/holder.js"></script>
    </head>
    <body>
        <div class="banner">
            <div class="container">
                <nav class="bar">
                    <ul>
                        <li><a href="#">Pin</a></li>
                        <li><a href="#">Theme</a></li>
                        <li><a href="#">Theme</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="main">
            <div class="container">
                <div class="row">
                    <div class="span4">
                        <div class="thumbnail thumbnail-box">
                            <a href="#" class="link-img"><img src="holder.js/440x300"></a>
                            <div class="caption">
                                <div class="user-avatar clearfix">
                                    <a href="#" class="avatar">
                                        <img src="holder.js/40x40/#9bdaba:#7cae94" class="img-circle" alt="" />
                                    </a>
                                    <p class="l-profile">
                                        <a href="#">Dara</a> <span> uploaded on </span> <a href="#">Phnom Penh</a> 
                                    </p>
                                </div>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                            <div class="summary">
                                <ul class="summary-list clearfix">
                                    <li><a href="#"><i class="icon-heart"></i> <span>245 likes</span></a></li>
                                    <li><a href="#"><i class="icon-eye-open"></i> <span>234 views</span></a></li>
                                    <li><a href="#"><i class="icon-comment"></i> <span>234 views</span></a></li>
                                    <li><a href="#"><i class="icon-picture"></i> <span>234 photos</span></a></li>
                                </ul>

                            </div>

                        </div>
                        <div class="thumbnail thumbnail-box">
                            <img src="holder.js/400x250">
                            <div class="caption">
                                <h3>Phnom Penh</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                            <div class="summary">
                                <ul class="summary-list clearfix">
                                    <li><i class="icon-heart"></i> <a href="#"><span>245 likes</span></a></li>
                                    <li><i class="icon-eye-open"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-comment"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-picture"></i> <a href="#"><span>234 photos</span></a></li>
                                </ul>
                                <div class="user-avatar clearfix">
                                    <a href="#" class="avatar">
                                        <img src="holder.js/40x40/#9bdaba:#7cae94" class="img-circle" alt="" />
                                    </a>
                                    <p class="l-profile">
                                        <a href="#">Viriay Ka</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end col1 -->
                    <div class="span4">
                        <div class="thumbnail thumbnail-box">
                            <img src="holder.js/370x200">
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                            <div class="summary">
                                <ul class="summary-list clearfix">
                                    <li><i class="icon-heart"></i> <a href="#"><span>245 likes</span></a></li>
                                    <li><i class="icon-eye-open"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-comment"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-picture"></i> <a href="#"><span>234 photos</span></a></li>
                                </ul>
                                <div class="user-avatar clearfix">
                                    <a href="#" class="avatar">
                                        <img src="holder.js/40x40/#9bdaba:#7cae94" class="img-circle" alt="" />
                                    </a>
                                    <p class="l-profile">
                                        <a href="#">Vavny You</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="thumbnail thumbnail-box">
                            <img src="holder.js/370x120">
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                            </div>
                            <div class="summary">
                                <ul class="summary-list clearfix">
                                    <li><i class="icon-heart"></i> <a href="#"><span>245 likes</span></a></li>
                                    <li><i class="icon-eye-open"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-comment"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-picture"></i> <a href="#"><span>234 photos</span></a></li>
                                </ul>
                                <div class="user-avatar clearfix">
                                    <a href="#" class="avatar">
                                        <img src="holder.js/40x40/#9bdaba:#7cae94" class="img-circle" alt="" />
                                    </a>
                                    <p class="l-profile">
                                        <a href="#">Vary Ny</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end col2 -->
                    <div class="span4">
                        <div class="thumbnail thumbnail-box">
                            <img src="holder.js/440x400">
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                            <div class="summary">
                                <ul class="summary-list clearfix">
                                    <li><i class="icon-heart"></i> <a href="#"><span>245 likes</span></a></li>
                                    <li><i class="icon-eye-open"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-comment"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-picture"></i> <a href="#"><span>234 photos</span></a></li>
                                </ul>
                                <div class="user-avatar clearfix">
                                    <a href="#" class="avatar">
                                        <img src="holder.js/40x40/#9bdaba:#7cae94" class="img-circle" alt="" />
                                    </a>
                                    <p class="l-profile">
                                        <a href="#">Dara</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="thumbnail thumbnail-box">
                            <img src="holder.js/260x120">
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                            <div class="summary">
                                <ul class="summary-list clearfix">
                                    <li><i class="icon-heart"></i> <a href="#"><span>245 likes</span></a></li>
                                    <li><i class="icon-eye-open"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-comment"></i> <a href="#"><span>234 views</span></a></li>
                                    <li><i class="icon-picture"></i> <a href="#"><span>234 photos</span></a></li>
                                </ul>
                                <div class="user-avatar clearfix">
                                    <a href="#" class="avatar">
                                        <img src="holder.js/40x40/#9bdaba:#7cae94" class="img-circle" alt="" />
                                    </a>
                                    <p class="l-profile">
                                        <a href="#">Dara Good</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>  <!-- end col3 -->
                </div> <!-- end row main -->
            </div><!-- end container main -->
        </div>

    </body>
</html>
